<script setup>
import {Avatar, Setting, SwitchButton, UserFilled} from '@element-plus/icons-vue'
import router from "@/router";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import axios from "axios";

const avatarUrl = ref();
const eid = ref();
const name = ref();

const checkAuth = () => {
  const role = localStorage.getItem('role');
  if (role === null) {
    ElMessage.error('未登录，请重新登录');
    router.push('/login');
    return;
  }
  if (role !== '教练') {
    ElMessage.error('权限不足，请重新登录');
    router.push('/login');
  }
}

const logOut = () => {
  localStorage.removeItem('role');
  localStorage.removeItem('eid');
  localStorage.removeItem('ename')
  router.push('/login');
}

const load = () => {
  checkAuth();
  eid.value = localStorage.getItem('eid');
  name.value = localStorage.getItem('ename');
  axios.get("http://localhost:8080/v1/coach/loadAvatar?eid="+eid.value).then((response) => {
    if (response.data.state === 2001) {
      avatarUrl.value = response.data.data;
      console.log("头像加载成功",avatarUrl.value)
    }else {
      avatarUrl.value = 'http://localhost:9090/static/images/avatar/exampleAvatar.jpg';
      console.log("头像加载失败",avatarUrl.value)
    }
  })
}

load();

</script>

<template>
  <div>
    <!-- 头部区域 -->
    <div style="height: 60px; background-color: black; display: flex; align-items: center;">
      <div style="width: 200px; display: flex; align-items: center; font-size: 20px; color: white;">
        &nbsp; 教练页面
      </div>
      <div style="flex: 1; display: flex;"></div>
      <div style="width: fit-content; display: flex; align-items: center;margin-right: 10px">
        <p style="margin-right: 10px">{{name}}</p>
        <!-- 头像位置 -->
        <el-avatar size="50" :src="avatarUrl"/>
        <!--        <img src="https://img0.baidu.com/it/u=3785348319,2786421711&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=657"-->
        <!--             alt="头像" width="40px" height="40px">-->
        <!--        <span style="color: white; margin-left: 5px;">呵呵</span>-->
      </div>
    </div>

    <!-- 内容区域 -->
    <div style="display: flex;">
      <!-- 左侧导航 -->
      <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px);">
        <el-menu router :default-active="router.currentRoute.value.path" style="border: 0;">
          <el-menu-item index="/coach/mycourse">
            <el-icon>
              <Avatar/>
            </el-icon>
            <span>我的课程</span>
          </el-menu-item>

          <el-menu-item index="/coach/myuser">
            <el-icon>
              <UserFilled/>
            </el-icon>
            <span>我的学员</span>
          </el-menu-item>

          <el-menu-item index="/coach/myconfig">
            <el-icon>
              <Setting/>
            </el-icon>
            <span>我的设置</span>
          </el-menu-item>

          <el-menu-item @click="logOut">
            <el-icon>
              <SwitchButton/>
            </el-icon>
            <span>退出登录</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧内容 -->
      <div style="flex: 1; width: 0; background-color: aliceblue; padding: 10px;">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>